<template>
  <div class="bc">
    <div class="login">
      <img src="http://likede2-admin.itheima.net/img/logo.595745bd.png" alt="" class="login-logo">

      <el-form
        ref="ruleForm"
        :model="ruleForm"
        :rules="loginRules"
        status-icon
        label-width="10px"
        auto-complete="on"
        class="demo-ruleForm"
      >
        <!-- 账号 -->
        <el-form-item prop="account">
          <!-- prefix-icon 在输入框前面加icon -->
          <el-input
            v-model="ruleForm.account"
            size="200"
            type="text"
            autocomplete="off"
            placeholder="请输入账号"
            prefix-icon="el-icon-mobile-phone"
          />
        </el-form-item>
        <!-- 密码 -->
        <el-form-item prop="passWord">
          <el-input
            ref="passWord"
            v-model="ruleForm.passWord"
            show-password
            type="passWord"
            autocomplete="off"
            placeholder="请输入密码"
            prefix-icon="el-icon-lock"
          />
        </el-form-item>
        <!-- 验证码 -->
        <el-form-item :prop="ruleForm.account">
          <!-- prefix-icon 在输入框前面加icon -->
          <el-input
            v-model="ruleForm.Verification"
            style="width:232px;margin-top:-2px;position: fixed;"
            type="text"
            autocomplete="off"
            placeholder="请输入验证码"
            prefix-icon="el-icon-key"
          />
          <img :src="yzmPic" class="yzmPic">
        </el-form-item>
        <el-form-item>
          <el-button
            :loading="loading"
            type="primary"
            autofocus
            style="width:350px;margin-top:35px;position: fixed;"
            @click="submitForm"
          >登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { verificationCode } from '@/api'
export default {
  data() {
    return {
      // 按钮得加载状态
      loading: false,
      clientToken: '',
      ruleForm: {
        account: 'admin',
        passWord: 'admin',
        Verification: ''
      },
      // 验证规则
      loginRules: {
        account: [
          {
            required: true, message: '请输入账号', trigger: 'blur'
          },
          {
            max: 8, min: 5, message: '账号格式不正确', trigger: 'blur'
          }
        ],
        passWord: [
          {
            required: true, message: '请输入密码', trigger: 'blur'
          },
          {
            max: 8, min: 5, message: '请输入5-8位的密码', trigger: 'blur'
          }
        ]
      },
      yzmPic: ''
    }
  },
  async created() {
    this.clientToken = this.setSessionid()
    console.log(this.clientToken)
    // const s = this.Verification()
    // console.log(s)
    const res = await verificationCode(this.clientToken)
    console.log(res)
    this.yzmPic = 'https://likede2-java.itheima.net' + res.config.url
    // console.log(this.yzmPic)
  },
  methods: {
    // 四位随机数
    Verification() {
      // 四位随机数
      function getstr(len) {
        var template = ''// 将所有可选的字符存储起来
        for (var i = 65; i < 65 + 26; i++) {
          template += String.fromCharCode(i) // A~Z对应的Unicode码
        }
        for (var a = 97; a < 97 + 26; a++) {
          template += String.fromCharCode(a) // a~z
        }
        for (var b = 48; b < 48 + 10; b++) {
          template += String.fromCharCode(b) // 0~9
        }
        var result = ''
        for (var c = 0; c < len; c++) {
          var index = getnumber(0, template.length - 1) // 随机获取一个下标
          result += template[index]
        }
        return result
      }
      function getnumber(min, max) {
        return Math.floor((Math.random() * (max - min + 1) + min))
      }
      var strings = getstr(4) // 获取一个4位数
      // console.log(strings)
      return strings
    },
    // 32位随机数
    getId() {
      const list = []
      const range = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'
      for (let i = 0; i < 32; i++) {
        list[i] = range.substr(Math.floor(Math.random() * 0x10), 1)
      }
      list[19] = range.substr(([19] & 0x3) | 0x8, 1)
      const uuid = list.join('')
      return uuid
    },
    // 32位随机数
    setSessionid(num) {
      var len = num || 32
      var chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz123456789'
      var maxPos = chars.length
      var pwd = ''
      for (var i = 0; i < len; i++) {
        pwd += chars.charAt(Math.floor(Math.random() * maxPos))
      }
      return pwd
    },
    // 登录点击
    submitForm() {
      this.loading = true
      // 如果满足正则 就是true
      this.$refs.ruleForm.validate(async(valid) => {
        if (valid) {
          try {
            await this.$store.dispatch('user/clientApi', {
              clientToken: this.clientToken,
              code: this.ruleForm.Verification,
              loginName: this.ruleForm.account,
              loginType: 0,
              password: this.ruleForm.passWord
            })
            this.loading = false
            this.$router.push('/')
          } catch (err) {
            this.loading = false
            return false
          } finally {
            this.loading = false
          }
        } else {
          this.loading = false
          return false
        }
      })
    }

  }
}
</script>

<style scoped lang="scss">
// 只对当前组件生效的样式
$bg: #2d3a4b;
$dark_gray: #889aa4;
$light_gray: #eee;
.bc {
  background-image: url(http://likede2-admin.itheima.net/img/background.be4fae7d.png) ;
  width: 100%;
  height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
    position: relative;
}
.login {
  position: absolute;
    width: 430px;
    height: 320px;
    top: 50%;
    left: 50%;
    margin-top: -194px;
    margin-left: -259px;
    padding: 76px 35px 0;
    background: #fff;
    -webkit-box-shadow: 0 3px 70px 0 rgb(30 111 72 / 35%);
    box-shadow: 0 3px 70px 0 rgb(30 111 72 / 35%);
    border-radius: 10px;
}
.login-logo{
    position: absolute;
    width: 96px;
    height: 96px;
    top: -46px;
    left: 50%;
    margin-left: -48px;
}
.svg-container {
    padding: 6px 5px 6px 15px;
    color: $dark_gray;
    vertical-align: middle;
    width: 30px;
    display: inline-block;
  }
  .el-form-item__content {
    width: 300px;
    display: flex;
    float: left;
  }
  .yzmPic {
    position: absolute;
    right: 0px;
    bottom: -38px;
    width: 120px;
    height: 40px;
  }
   .show-pwd {
    position: absolute;
    right: 10px;
    top: 7px;
    font-size: 16px;
    color: $dark_gray;
    cursor: pointer;
    user-select: none;
  }

</style>
